<template>
  <section class="video-wrap">
    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="loading"/>

    <!--banner图-->
    <div class="banner-wrap">
      <van-swipe :autoplay="10000" :height="400" indicator-color="#e85100">
        <van-swipe-item v-for="(item,index) in bannerList" :key="index">
          <img :src="item" alt="" class="banner-img">
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--视频分类-->
    <div class="video-cate-wrap flex flex-justify">
      <div class="text-center cate-item" v-for="(item, index) in videoCate" :key="index"
           @click="queryVideoCate(item.id)">
        <img :src="item.icon" alt="" class="cate-icon">
        <p>{{item.title}}</p>
      </div>
    </div>

    <!--每日视频-->
    <div>
      <div class="today-video-title">每日视频</div>
      <div class="today-videos-wrap" v-show="!loading">
        <video-item v-for="(item, index) in todayVideos" :key="index" :video-item="item"></video-item>
      </div>
    </div>

    <!--回顶部-->
    <to-top :isShowTop="isShowTop"/>

    <!-- 页面底部导航 -->
    <tabbar-com tabbar-name="video"/>
  </section>
</template>

<script lang="ts">
  import utils from "@/common/utils";
  import {Component, Vue} from "vue-property-decorator";

  import {Swipe, SwipeItem} from "vant";

  import videoItem from "./videoInclude/videoItem.vue";

  import TabbarCom from "@/components/tabbar.vue";
  import toTop from "@/components/toTop.vue";

  @Component({
    components: {
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      videoItem,
      TabbarCom,
      toTop
    }
  })
  export default class Video extends Vue {
    private loading: boolean = true; // 页面加载中

    private bannerList: string[] = []; // 视频分类

    private listLoading: boolean = false; // 今日视频列表数据是否加载中
    private todayVideos: object[] = []; // 今日视频列表

    private videoCate: object[] = []; // 视频分类

    private isShowTop: boolean = false; // 回顶部


    mounted() {
      this.getTodayVideo();
      this.getVideoCategory();

      // 监听页面滚动距离
      window.addEventListener("scroll", () => {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        this.isShowTop = scrollTop > 800;
      });
    }

    // 获取视频分类
    getVideoCategory() {
      this.$api
        .get("/videoCategory", {}, "baseUrl2")
        .then((res: any) => {
          if (res && res.itemList) {
            this.videoCate = res.itemList.filter((item:object) => item.data).map((item:object) => {
              let title = item.data.title.replace("#", "");
              const {id, icon} = item.data;
              return {title, id, icon};
            });
          }
        })
        .catch((e:any) => this.$toast(e.msg))
        .finally(() => {
        });
    }

    // 点击查询分类中的视频
    queryVideoCate(id:string) {
      this.$router.push({
        name: "videoCate",
        params: {id}
      });
    }

    // 获取今日视频推荐
    getTodayVideo() {
      this.$api
        .get("/todayVideo", {}, "baseUrl2")
        .then((res: any) => {
          if (res && res.length) {
            let result:object[] = [];
            res.forEach((item:object, index:number) => {
              try {
                if (item.type !== "textCard") {
                  const {cover, createTime, description, id, uid, playUrl, url, title} = item.data.content.data;
                  result.push({
                    cover, description, id, uid, playUrl, url, title,
                    createTime: utils.formatDate(createTime)
                  });
                  // 将前三张当做banner使用
                  if (index < 3) {
                    this.bannerList.push(url);
                  }
                }
              } catch (e) {
                this.$toast("数据结构解析出错");
              }
            });
            this.todayVideos = result;
          }
        })
        .catch((e:any) => this.$toast(e.msg))
        .finally(() => {
          this.loading = false;
          this.listLoading = false;
        });
    }


  }
</script>
<style lang="scss">
  .video-wrap {
    padding-bottom: 50px;

    .banner-wrap {
      width: 100%;

      .banner-img {
        width: 100%;
        max-height: 400px;
      }
    }

    .today-video-title {
      padding: 16px 16px 0 16px;
      color: #000;
      font-weight: bold;
      font-size: 20px;
    }

    .video-cate-wrap {
      width: 100%;
      flex-wrap: wrap;
      background: #f4f4f4;
      padding: 15px 0;

      .cate-item {
        width: 60px;
        padding: 15px 0 0 0;

        .cate-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
    }

  }
</style>

